<template>
 
      <div>
        <Dog1
        v-for="(text,index) in arr" :key="index"
        :id="index"
        :url="text.dogImgUrl"
        :name="text.dogName"
        @love="fn"
        />

        <p>显示喜欢的狗:</p>
  
      <p v-for="(item, index) in Arr" :key="index">{{ item }}</p>

    </div>

</template>

<script>
  import Dog1 from './components/Dog1.vue'
export default {
  data(){
    return{
      Arr:[],
      arr:[
    {
        dogImgUrl:
        "https://tse2-mm.cn.bing.net/th/id/OIP-C.6TJrxrGWK2X6klMms6HA6QAAAA?w=177&h=182&c=7&r=0&o=5&dpr=1.25&pid=1.7",
        dogName: "博美",
    },
    {
        dogImgUrl:
        "https://tse4-mm.cn.bing.net/th/id/OIP-C.Kvk-xD7aq7s5VTpQyrwUywHaHa?w=174&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7",
        dogName: "泰迪",
    },
    {
        dogImgUrl:
        "https://tse4-mm.cn.bing.net/th/id/OIP-C.cR5FYVgtD8Tu2WDvCOcwVwAAAA?w=182&h=182&c=7&r=0&o=5&dpr=1.25&pid=1.7",
        dogName: "金毛",
    },
    {
        dogImgUrl:
        "https://tse3-mm.cn.bing.net/th/id/OIP-C.9HNlz8CviKGqi43IkrHafAAAAA?w=156&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7",
        dogName: "哈士奇",
    },
    {
        dogImgUrl:
        "https://tse3-mm.cn.bing.net/th/id/OIP-C.fpEfO_ynVEAO7J_wlC3_jwAAAA?w=181&h=181&c=7&r=0&o=5&dpr=1.25&pid=1.7",
        dogName: "阿拉斯加",
    },
    {
        dogImgUrl:
        "https://tse4-mm.cn.bing.net/th/id/OIP-C.zImGI3KGbzS-DRUoYlGQhgAAAA?w=229&h=194&c=7&r=0&o=5&dpr=1.25&pid=1.7",
        dogName: "萨摩耶",
    },
]
    }
  },
  components:{
    Dog1
  },
  methods:{
    fn(dogName) {
      this.Arr.push(dogName)
    }
  }
}
</script>

<style>

</style>